<template>
    <span class="i-layout-menu-side-title">
        <span class="i-layout-menu-side-title-icon" :class="{ 'i-layout-menu-side-title-icon-single': hideTitle }"
            v-if="menu.custom !== '/' && menu.custom !== ''">
            <Icon :type="menu.icon" v-if="menu.icon" />
            <Icon :custom="menu.custom" v-else-if="menu.custom" />
            <img :src="menu.img" v-else-if="menu.img" />
        </span>
        <span class="i-layout-menu-side-title-text" :class="{ 'i-layout-menu-side-title-text-selected': selected }"
            v-if="!hideTitle">{{ tTitle(menu.title) }}</span>
    </span>
</template>
<script>
    import tTitle from '../mixins/translate-title';

    export default {
        name: 'iMenuSideTitle',
        mixins: [tTitle],
        props: {
            menu: {
                type: Object,
                default () {
                    return {};
                }
            },
            hideTitle: {
                type: Boolean,
                default: false
            },
            // 用于侧边栏收起 Dropdown 当前高亮
            selected: {
                type: Boolean,
                default: false
            }
        },
        mounted () {
            // console.log(this.menu);
        }
    };
</script>
